<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        height: 3000px;
        /* 渐变背景 */
        background: linear-gradient(45deg, #f3ec78, #af4261);
      }
    </style>
  </head>
  <body>
    <script>
      // 监听滚动事件
      window.onscroll = debounce(showScroll, 300);
      // 防抖
      function debounce(fn, delay) {
        // 定时器
        let timer = null;
        // 返回一个函数
        return function () {
          // 如果定时器存在，清除定时器
          if (timer) {
            clearTimeout(timer);
          }
          // 重新设置定时器
          timer = setTimeout(fn, delay);
        };
      }

      function showScroll() {
        var scrollTop = document.documentElement.scrollTop;
        console.log("滚动条位置：" + scrollTop);
      }
    </script>
  </body>
</html>
